<!-- 共用的头部组件 -->
<template>
  <div class="common-header-container">
    <el-row>
      <el-col :span="6" class="loc-start" :style="{ color: themeColor }">{{ headerTitle }}</el-col>
      <el-col :span="14"></el-col>
      <el-col :span="4" class="loc-end">
        <i class="el-icon-back return-last-page" title="返回上一页" @click="returnLastPage"></i>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    themeColor() {
      // 假设主题色存储在 Vuex 的 state 中
      return localStorage.getItem('themeColor');
    },
  },
  props: {
    headerTitle: {
      type: String,
    },
  },
  methods: {
    // 返回上一页
    returnLastPage() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.common-header-container {
  width: 100%;
  height: 100%;
  .el-row {
    width: 100%;
    height: 100%;
    .el-col-6 {
      height: 100%;
      font-size: 28px;
      font-weight: bold;
      letter-spacing: 5px;
      padding-left: 1%;
      box-sizing: border-box;
    }
    .el-col-14 {
      height: 100%;
    }
    .el-col-4 {
      height: 100%;
      padding-right: 1%;
      box-sizing: border-box;
      .return-last-page {
        font-size: 28px;
        cursor: pointer;
      }
    }
  }
}
</style>